<template>
  <div class="slider-ctn">

    <el-slider v-bind="$attrs" v-on="$listeners" :show-tooltip="false" v-model="value" 
      :class="{'hide-btn':hideBtn, 'high-light':highLight}" :disabled="lockMode || hideBtn"></el-slider>
    
    <span class="left text-span" :style="leftSpanCss">{{text}} {{value}}%</span>
    <span class="right text-span" :style="rightSpanCss">{{rightText}} {{100-value}}%</span>

  </div>
</template>

<script>
export default {
  name:"slider-bar",
  props: {
    initValue: {
      type: Number,
      default: 50
    },
    leftText: {
      type: String,
      default: "左项"
    },
    rightText: {
      type: String,
      default: "右项"
    },
    lockMode:{
      type: Boolean,
      default: false
    },
    hideBtn:{
      type: Boolean,
      default: false
    },
    highLight:{
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      value: this.initValue,
      text: this.leftText
    };
  },
  computed: {
    leftSpanCss(){
      let maxWidth = this.value,
        left = Math.floor(maxWidth/2);
      return "left: "+left+"%;max-width: "+maxWidth+"%";
    },
    rightSpanCss(){
      let maxWidth = 100 - this.value,
        left = 100 - Math.round(maxWidth/2);
      return "left: "+left+"%;max-width: "+maxWidth+"%";
    }
  },
  methods:{
    getValue(){
      return this.value;
    },
    getLeftValue(){
      return getValue();
    },
    getRightValue(){
      return 100 - this.value;
    },
    setText(text){
      this.text = text;
    }
  }
};
</script>

<style lang="scss" scoped>
$slider-height: 30px;

.slider-ctn{
  position: relative;
  border: solid 1px #ebeef5;
  border-radius: 4px;
  padding: 5px;

  /deep/ .el-slider{

    .el-slider__runway{
      height: $slider-height;
      margin: 0;
      background-color: #89d7d6;
    }

    .el-slider__bar{
      height: $slider-height;
    }
    .el-slider__button-wrapper{
      height: 2 * $slider-height;

      .el-slider__button{
        height: $slider-height;
        width: 15px;
        border-radius: 4px;
      }
    }
  }

  .text-span{
    display: block;
    position: absolute;
    top: 50%;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    transform: translate(-50%,-50%);
  }
  

}

.hide-btn{
  /deep/ .el-slider__button-wrapper{
    display: none;
  }
}
.high-light{
  /deep/ .el-slider__runway{
    background-color: #04bebd !important;
    .el-slider__bar{
      background-color: #04bebd !important;
    }
  }
}

</style>
